<template>
    <div>
        <el-collapse-item title="- 图标点的信息" :name="props.id">
            <ul class="editorformTable">
                <li class="editorformItem">
                    <div class="editorformItemName">大小比例</div>
                    <div class="editorformItemFunc">
                        <el-input-number
                            v-model="style.scale"
                            @input="change('scale', style.scale)"
                            class="editorforminput"
                            :step="1"
                            conliols-position="right"
                            :min="1"
                        />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">旋转角度</div>
                    <div class="editorformItemFunc">
                        <!-- <el-input-number
                            v-model="style.rotationDegree"
                            @input="change('rotationDegree', style.rotationDegree)"
                            class="editorforminput"
                            :step="1"
                            conliols-position="right"
                            :min="1"
                        /> -->
                        <el-slider
                            v-model="style.rotationDegree"
                            :min="0"
                            :max="360"
                            :step="1"
                            class="editorformItemslider"
                            @input="change('rotationDegree', style.rotationDegree)"
                        />
                    </div>
                </li>

                <!-- <border :graphic="props.graphic"></border> -->
                <!-- <fillmaterial :graphic="props.graphic" type="1" :fill="false"></fillmaterial> -->
            </ul>
        </el-collapse-item>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
// import border from "../fillmaterial/border.vue";
// import fillmaterial from "../fillmaterial/fillmaterial.vue";
import global from "@/utils/global.data.params";
interface Props {
    id?: any; // 默认值
    graphic?: any;
    texture?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
    graphic: {},
    texture: false,
    id: "",
});
const style: any = reactive(props.graphic.style);
// const plottingType: any = ref(props.graphic.options.plottingType);
// let pageTitle: any = ref("");
const change = (opt: string, val: any) => {
    setTimeout(() => {
        switch (opt) {
            case "scale":
                props.graphic.setStyle({ scale: val });
                break;
            case "rotationDegree":
                props.graphic.setStyle({ rotationDegree: val });
                break;
            default:
                props.graphic.setStyle(style);
        }
    }, 100);
};
</script>
